<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>权限列表</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
	    //工具栏
	    var toolbar = [{
	        text: '新增',
	        iconCls: 'icon-add',
	        handler: function () {  $('#dd').dialog('open');}
	    }, '-',{
	        text: '修改',
	        iconCls: 'icon-edit',
	        handler: function () {  $('#dd').dialog('open');}
	    }, '-', {
	        text: '删除',
	        iconCls: 'icon-cancel',
	        handler: function () { alert('delete') }
	    }];
	   $(function(){
	       $('#userlist').datagrid({  
			title:'角色列表',  
			iconCls:'icon-save',   
			data:{
					"total":50,
					"rows":[
					    {id:1,name:"角色1"},
					    {id:2,name:"角色2"},
					    {id:3,name:"角色3"},
					    {id:4,name:"角色4"},
					    {id:5,name:"角色5"}
				    ]
			},  
			columns:[[  
				{field:'id',title:'角色ID',width:100,align:'center'},  
				{field:'name',title:'角色名称',width:100,align:'center'},  
				{field:'xx',title:'角色拥有的权限[权限名 | 权限URL | 模块名  ]',width:500,align:'center',formatter:format}	
			]],  
			pagination:true,
			toolbar: toolbar  
		});
		 //初始化查询栏
		 $("#submit_search").linkbutton({ iconCls: 'icon-search', plain: true })
            .click(function () {
               
            });
          
          //初始化修改窗口  
         $('#dd').dialog({
			    title: 'My Dialog',
			    width: 700,
			    height: 500,
			    closed: true,
			    cache: false,
			    href: '',
			    modal: true,
			    iconCls: 'icon-save',
                buttons: [{
                    text:'提交',
                    iconCls:'icon-ok',
                    handler:function(){
                        alert('ok');
                    }
                },{
                    text:'关闭',
                    handler:function(){
                        alert('cancel');;
                    }
                }]
			});
			
		   //tree选项框初始化
           $("#ah").tree({
               data:[{
				"id":11,
				"text":"用户管理",
				"state":"closed",
				"children":[{
					"id":111,
					"text":"前台用户管理"
				},{
					"id":112,
					"text":"留言管理",
					"checked":true
				}]
			},{
				"id":12,
				"text":"加盟管理",
				"children":[{
					"id":121,
					"text":"本地生活加盟"
				},{
					"id":122,
					"text":"本地商务加盟"
				}]
			}],
			   method:'post',
			   animate:true,
			   checkbox:true
           });
            
	   });
	   
	    //列格式化方法
	   function format(val,row){
	        var sel="<select name='search_type'>"
	                +"<option>留言管理|http://xxx|用户管理</option>"
	                +"<option>留言管理|http://xxx|用户管理</option>"
	                +"<option>留言管理|http://xxx|用户管理</option>"
	                +"<option>留言管理|http://xxx|用户管理</option>"
	                +"<option>留言管理|http://xxx|用户管理</option></select>"
			return sel;
	  }
	</script>
</head>
<body>
   <form name="searchform" method="post" action="" id ="searchform">
    <td width="70" height="30"><strong>角色查询：</strong></td>
    <td height="30">
        <input type="text" name="keyword" size=20 placeholder="角色名称"/>
        <a id="submit_search">搜索</a>
    </td>
  </form>
  <table id="userlist"></table>
    <div id="dd">
           <div align="center" style="margin-top: 30px">
            <form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:50%" data-options="label:'角色ID:'" readonly="readonly"/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:50%" data-options="label:'角色名称:',required:true">
            </div>
             <div style="margin-bottom:20px">
                  <table style="width:48%">
                    <td valign="top" style="width:50px">
                                                              权限:
                    </td>
                    <td><ul id="ah"></ul></td>
                  </table>
            </div>
        </form>
           </div>
    </div>
</body>
</html>